<template>
    <div>
        <div class="box">
            <horder class="horder">
                <van-nav-bar title="" left-text="" left-arrow @click-left="$router.go(-1)" />
            </horder>
            <main class="main">
                <img :src="obj.image" alt="" width="100%">
                <p>{{ obj.title }}</p>
                <p>{{ obj.price }}</p>
            </main>
            <h5 style="width: 100%;height: 30px;border: 1px solid #ccc;margin-top: 10px;">榜单已入选牙膏第2名</h5>
            <h5 style="width: 100%;height: 30px;border: 1px solid #ccc;margin-top: 10px;">榜单已入选牙膏第2名</h5>
            <h5 style="width: 100%;height: 30px;border: 1px solid #ccc;margin-top: 10px;">榜单已入选牙膏第2名</h5>
            <h5 style="width: 100%;height: 30px;border: 1px solid #ccc;margin-top: 10px;">榜单已入选牙膏第2名</h5>
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" dot />
                <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.totalCount" @click="$router.push('/ac')"/>
                <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
                <van-action-bar-button type="warning" text="马上抢" @click="$router.push('/login')"/>
                <van-action-bar-button type="danger" text="加入购物车" @click="add"/>
            </van-action-bar>
        </div>
    </div>
</template>

<script setup>
import api from '@/api/api'
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
const router = useRouter()
const route = useRoute()
const obj = ref([])
onMounted(() => {
    api.get('/detail', {
        params: { id: route.params.id }
    }).then(res => {
        if (res.data.code) {
            obj.value = res.data.data
        }
    })
})
const add=()=>{
      store.addItem(obj.value)
}
</script>

<style lang="scss" scoped></style>